@import "partials/mixins";
.battle {
    background-color: #000;
    .player {
        height: ptr(70px);
        .list {
            margin-top: ptr(20px);
        }
        .number {
            padding-right: ptr(10px);
        }
        .name {
            padding-left: ptr(10px);
        }
    }
    .line {
        height: ptr(1px);
        width: ptr(300px);
        background-color: #fcc;
        margin: auto;
    }
    .monster {
        height: ptr(70px);
        .list {
            margin-top: ptr(20px);
        }
        .number {
            padding-left: ptr(10px);
        }
        .name {
            padding-right: ptr(10px);
        }
    }
    .buff {
        height: ptr(17px);
    }
    .hp {
        width: ptr(300px);
        height: ptr(20px);
        margin: 0 auto;
        padding: ptr(1px);
        border: ptr(2px) solid #AF0A0A; // border-radius: ptr(20px);
        position: relative;
        .pb-bar {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            background: #AF0A0A;
            transition: width 500ms;
        }
        .hptext {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            text-align: center;
            color: #fff;
            font-size: ptr(12px);
            line-height: ptr(16px);
        }
    }
    .skillItem {
        border: 1px solid #fff;
        width: ptr(70px);
        height: ptr(16px);
        line-height: ptr(16px);
        color: #fff;
        text-align: center;
        margin: 0 ptr(2px);
        position: relative;
        font-size: ptr(12px);
        .pb-bar {
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 0;
            height: 100%;
            background: #999;
            opacity: 0.6;
        }
    }
}